<template>
    <div>
        <div>
            <!-- <span v-html="tags.replaceAll('tag-large', '')"></span> -->
            <span v-for="tag in tags" :key="tag.id" :class="tag.tagclass.replaceAll('tag-large', '')">{{ tag.sname }}</span>
            <span class="tag tag-gray-light" @click="showaddpage"><van-icon name="plus" />新增</span>
        </div>
    </div>
</template>
<script>
import Vue from 'vue'
import qs from 'qs'
import { Search, List, Cell, PullRefresh, Toast, Tabbar, TabbarItem, Popup, DatetimePicker, ActionSheet, Tab, Tabs, Collapse, CollapseItem, Dialog, Uploader, Rate, Icon, Form, Sticky, Image, Loading, Step, Steps } from 'vant'
Vue.use(Search).use(List).use(Cell).use(PullRefresh).use(Toast).use(Tabbar).use(TabbarItem).use(Popup).use(DatetimePicker).use(ActionSheet).use(Tab).use(Tabs).use(Collapse).use(CollapseItem).use(Dialog).use(Uploader).use(Rate).use(Icon).use(Form).use(Sticky).use(Image).use(Loading).use(Step).use(Steps)
export default {
    name: 'addtag',
    data () {
        return {
            tags: [],
            botags: []
        }
    },
    props: ['bo', 'id'],
    mounted () {
        this.loaddata()
    },
    methods: {
        loaddata () {
            this.axios({
                method: 'post',
                url: '/api/tags.getlist.do',
                data: qs.stringify({ bo: this.bo, scode: this.id })
            }).then(res => {
                //console.log(res)
                this.tags = res.data.tags
                this.botags = res.data.botags
            }).catch(res => {
                this.reserror(res)
            })
        },
        showaddpage () {
            this.$router.push({ name: 'newtag', query: { tags: this.tags, botags: this.botags, bo: this.bo, id: this.id } })
        }
    },
    watch: {
        '$route' () {
            //console.log('route变更', this.$store.state)
            this.loaddata()
        }
    }
}
</script>
